<!-- 支付后 支付订单详情-->
<template>
  <div v-loading="!layoutShow" class="info-layout" element-loading-text="数据加载中">

    <div v-if="orderInfo.order || orderInfo.status" class="success">

      <i class="el-icon-success" />
      <h3 class="type-text webfont-Medium">支付成功</h3>
      <ul class="order-box">
        <li v-if="orderInfo.campaignId" class="order-item">
          <p class="title">
            <span>广告系列ID:</span>
            <label class="info">{{ orderInfo.campaignId }}</label>
          </p>
        </li>
        <li class="order-item">
          <p class="title">
            <span>订单号:</span>
            <label v-if="orderInfo.orderid" class="info">{{ orderInfo.orderid }}</label>
            <label v-else class="info">{{ orderInfo.order }}</label>
          </p>

        </li>
        <li class="order-item">
          <p class="title">
            <span>支付金额:</span>

            <label class="info">{{$store.state.user.unit==='USD'?'$':'￥'}}
              <countTo :start-val="0" :decimals="2" :end-val="orderInfo.amount||orderInfo.recharge" :duration="10"
                class="num"></countTo>
            </label>
          </p>
        </li>
        <li v-if="orderInfo.tradeNo" class="order-item">
          <p class="title">
            <span>支付订单号:</span>
            <label v-if="orderInfo.tradeNo" class="info">{{ orderInfo.tradeNo }}</label>
            <label v-else class="info">{{ orderInfo.order }}</label>
          </p>
        </li>
        <li class="order-item">
          <p class="title">
            <span>支付时间:</span>
            <label class="info">{{ orderInfo.createat||orderInfo.time }}</label>
          </p>
        </li>
        <li class="order-item">
          <p class="title">
            <span>支付渠道:</span>
            <label v-if="orderInfo.del" class="info">支付宝</label>
            <label v-else class="info">{{ orderInfo.remark*1===1?'余额': orderInfo.remark*1===2?'余额+支付宝':'支付宝' }}</label>
          </p>
        </li>
      </ul>
    </div>

    <div v-else class="fail">
      <i class="el-icon-warning" />
      <h3 class="type-text">支付失败</h3>
      <p class="type-sec">支付超时或未支付,请重新支付</p>
    </div>

  </div>
</template>
<script>
  import countTo from 'vue-count-to'
  export default {
    name: '',
    components: {
      countTo
    },
    props: {
      orderInfo: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }, // ·������
    data() {
      return {
        layoutShow: false
      }
    },
    computed: {

    },
    watch: {

      // obj: { //�����Ķ���
      //   deep: true, //���ȼ�������Ϊ true
      //   // ������wacth��������firstName��������֮��������ȥִ��handler����
      //       immediate: true
      //   handler: function(newV, oldV) {
      //   }
      // }
      orderInfo: {
        deep: true,
        immediate: true,
        handler: function(newV) {
          return newV
        }
      }
    },

    mounted() {
      setTimeout(() => {
        this.layoutShow = true
      }, 2000)
    },
    // ������
    created() {
      this.layoutShow = false
    },
    // ���غ�

    // ���ٺ�
    destroyed() {

    },

    // ����
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  @import '~@/styles/variables.scss';

  .info-layout {
    background-color: #FFFFFF;
    margin: 0 auto;

    .success,
    .fail {
      text-align: center;
      max-width: 340px;
      margin: 0 auto;

      p,
      h3,
        {
        text-align: center;

      }

      i {
        font-size: 48px;
        color: #E9716A;
        margin-bottom: 24px;
      }

      .el-icon-success {
        color: rgba(82, 196, 26, 1);
      }

      h3 {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 38px;
      }

      ul {
        li {
          text-align: left;
          font-size: 14px;
          line-height: 14px;
          margin-bottom: 24px;

          .title {
            display: inline-block;
            color: #ACB6C2;
            width: 100%;
            display: flex;

            span {
              width: 25%;
              text-align: right;
            }

            label {
              margin-left: 20px;
              font-size: 14px;
              color: #666666;
              width: 75%;
              text-align: left;
              font-weight: normal;
            }
          }
        }
      }

      .type-sec {
        color: #ACB6C2;
      }

    }

  }
</style>
